<template>
<div class="wrapper">
  <van-swipe :autoplay="3000" @change="onChange">
    <van-swipe-item v-for="(image, index) in images" :key="index"  fit="cover">
      <img class="swiper-img" v-lazy="image" />
    </van-swipe-item>
    <template #indicator>
      <div class="custom-indicator">{{ current + 1 }}/3</div>
    </template>
  </van-swipe>
</div>
</template>

<script>
import { ImagePreview } from 'vant';
export default {
  name: 'HomeSwiper',
  data() {
    return {
      images: [
        "//imgs.qunarzz.com/vs_ceph_b2c_001/b0efa14f-b61b-4044-951c-ecf377b3d504.jpg_r_480x320x95_d1624f7b.jpg",
        "//tr-osdcp.qunarzz.com/tr-osd-tr-manager/img/fd16ccffb2e2376ff370bda3bebebd71.jpg",
        "//tr-osdcp.qunarzz.com/tr-osd-tr-manager/img/5a11974656794b4715156501be10c1b7.jpg"
      ],
      current: 0,
    };
  },
  
  methods: {
    onChange(index) {
      this.current = index;
    },
  },
};
</script>

<style scoped>
.wrapper {
  overflow: hidden;
  width: 100%;
  height: 180px;
  border-radius: 10rpx;
  overflow: hidden;
}
.swiper-img {
  width: 100%;
  height: 180px;
}
.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
</style>
